import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const DemoColumn = () => {
  const data = [
    {
      "school": "南昌大学",
      "year": "2021-3",
      "money": 5
    },
    {
      "school": "南昌大学",
      "year": "2021-6",
      "money": 7
    },
    {
      "school": "南昌大学",
      "year": "2021-9",
      "money": 6
    },
    {
      "school": "南昌大学",
      "year": "2021-12",
      "money": 5
    },
    {
      "school": "南昌大学",
      "year": "2022-3",
      "money": 7
    },
    {
      "school": "南昌大学",
      "year": "2022-6",
      "money": 8
    },
    {
      "school": "南昌大学",
      "year": "2022-9",
      "money": 6
    },
    {
      "school": "南昌大学",
      "year": "2022-12",
      "money": 9
    },


    {
      "school": "江西师范大学",
      "year": "2021-3",
      "money": 2
    },
    {
      "school": "江西师范大学",
      "year": "2021-6",
      "money": 3
    },
    {
      "school": "江西师范大学",
      "year": "2021-9",
      "money": 2
    },
    {
      "school": "江西师范大学",
      "year": "2021-12",
      "money": 4
    },
    {
      "school": "江西师范大学",
      "year": "2022-3",
      "money": 3
    },
    {
      "school": "江西师范大学",
      "year": "2022-6",
      "money": 5
    },
    {
      "school": "江西师范大学",
      "year": "2022-9",
      "money": 6
    },
    {
      "school": "江西师范大学",
      "year": "2022-12",
      "money": 5
    },

    {
      "school": "江西财经大学",
      "year": "2021-3",
      "money": 1
    },
    {
      "school": "江西财经大学",
      "year": "2021-6",
      "money": 3
    },
    {
      "school": "江西财经大学",
      "year": "2021-9",
      "money": 2
    },
    {
      "school": "江西财经大学",
      "year": "2021-12",
      "money": 4
    },
    {
      "school": "江西财经大学",
      "year": "2022-3",
      "money": 3
    },
    {
      "school": "江西财经大学",
      "year": "2022-6",
      "money": 5
    },
    {
      "school": "江西财经大学",
      "year": "2022-9",
      "money": 6
    },
    {
      "school": "江西财经大学",
      "year": "2022-12",
      "money": 5
    },

    {
      "school": "东华理工大学",
      "year": "2021-3",
      "money": 1.5
    },
    {
      "school": "东华理工大学",
      "year": "2021-6",
      "money": 2
    },
    {
      "school": "东华理工大学",
      "year": "2021-9",
      "money": 3
    },
    {
      "school": "东华理工大学",
      "year": "2021-12",
      "money": 2
    },
    {
      "school": "东华理工大学",
      "year": "2022-3",
      "money": 1
    },
    {
      "school": "东华理工大学",
      "year": "2022-6",
      "money": 4
    },
    {
      "school": "东华理工大学",
      "year": "2022-9",
      "money": 3
    },
    {
      "school": "东华理工大学",
      "year": "2022-12",
      "money": 5
    },

    {
      "school": "南昌航空大学",
      "year": "2021-3",
      "money": 3
    },
    {
      "school": "南昌航空大学",
      "year": "2021-6",
      "money": 4
    },
    {
      "school": "南昌航空大学",
      "year": "2021-9",
      "money": 2
    },
    {
      "school": "南昌航空大学",
      "year": "2021-12",
      "money": 4
    },
    {
      "school": "南昌航空大学",
      "year": "2022-3",
      "money": 5
    },
    {
      "school": "南昌航空大学",
      "year": "2022-6",
      "money": 6
    },
    {
      "school": "南昌航空大学",
      "year": "2022-9",
      "money": 5
    },
    {
      "school": "南昌航空大学",
      "year": "2022-12",
      "money": 4
    },
  ];
  const config = {
    data,
    isGroup: true,
    xField: 'year',
    yField: 'money',
    seriesField: 'school',

    /** 设置颜色 */
    // color: ['#a8ddb5', '#a8ddb5', '#a8ddb5', '#a8ddb5', '#a8ddb5']
    // color: ['#20A6E6', '#20CCE6', '#1FFABA', '#6C19FF', '#FFAA19'],

    /** 设置间距 */
    yAxis: {
      label: {
        formatter: (v) => `${(v / 1).toFixed(1)} 亿元`,
        style: {
          fontSize: 20
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 20
        }
      }
    },
    legend: {
      itemName: {style: {fontSize: 18}},
    }
  };
  return <Column {...config} />;
};

export default DemoColumn
